import { useEffect, useState } from 'react';
import { Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import './index.scss';
import LayoutMenu from '@/layouts/components/menu/index.jsx';
import LayoutTabs from '@/layouts/components/tabs/index.jsx';
import LayoutHeader from '@/layouts/components/header/index.jsx';

const { Sider, Content } = Layout;

const COLLAPSE_WIDTH = 1200; // 响应式断点宽度

const ErpLayout = () => {
  const [collapsed, setCollapsed] = useState(false);

  // 响应式处理
  useEffect(() => {
    const handleResize = () => {
      const screenWidth = document.body.clientWidth;
      setCollapsed(screenWidth < COLLAPSE_WIDTH);
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // 初始化时执行一次

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <>
      <Layout className='container'>
        {/* 侧边栏区域 */}
        <Sider
          trigger={null}
          collapsible
          collapsed={collapsed}
          width={220}
          theme={'dark'}
        >
          <LayoutMenu theme={'dark'} />
        </Sider>

        {/* 主内容区域 */}
        <Layout style={{ marginLeft: collapsed ? 80 : 220, transition: 'all 0.2s' }}>
          {/* 头部 */}
          <LayoutHeader
            onCollapsedChange={setCollapsed} 
            collapsed={collapsed}
          />
          {/* 标签页 */}
          <LayoutTabs />
          {/* 内容区域 */}
          <Content >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </>
  );
};

export default ErpLayout;